import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:portal_website/pages/common_header.dart';

class InternetMarketingPage extends StatelessWidget {
  const InternetMarketingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(top: 50),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 头部导航
              Breadcrumb(text: "首页 > 服务能力 > 互联网营销"),

              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 页面标题
                  _buildPageTitle(),

                  // 服务概览
                  _buildOverviewSection(),

                  // 服务内容
                  _buildServicesSection(),

                  // 服务流程
                  _buildProcessSection(),

                  // 数据统计
                  _buildStatsSection(),

                  // 案例展示
                  _buildCasesSection(),
                ],
              ),

              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.vertical(bottom: Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 10,
            offset: Offset(0, 5),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 30),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text(
            '创新服务平台',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          MediaQuery.of(Get.context!).size.width < 768
              ? const Icon(Icons.menu, color: Colors.white)
              : _buildNavigationMenu(),
        ],
      ),
    );
  }

  Widget _buildNavigationMenu() {
    return Row(
      children: [
        _buildNavItem('首页'),
        _buildNavItem('服务能力'),
        _buildNavItem('互联网营销', isActive: true),
        _buildNavItem('成功案例'),
        _buildNavItem('联系我们'),
      ],
    );
  }

  Widget _buildNavItem(String text, {bool isActive = false}) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: 16,
          fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
        ),
      ),
    );
  }

  Widget _buildPageTitle() {
    return Column(
      children: [
        const Text(
          '互联网营销服务',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 32,
            fontWeight: FontWeight.bold,
            height: 1.5,
          ),
        ),
        const SizedBox(height: 10),
        Container(
          width: 100,
          height: 4,
          color: const Color(0xFF207CCA),
        ),
        const SizedBox(height: 20),
        Container(
          constraints: const BoxConstraints(maxWidth: 800),
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: const Text(
            '专业数字营销解决方案，助力企业实现品牌曝光和销售增长',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 18,
              height: 1.8,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildOverviewSection() {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        children: [
          MediaQuery.of(Get.context!).size.width < 768
              ? Column(
                  children: [
                    _buildOverviewText(),
                    const SizedBox(height: 20),
                    _buildOverviewImage(),
                  ],
                )
              : Row(
                  children: [
                    Expanded(child: _buildOverviewText()),
                    const SizedBox(width: 40),
                    _buildOverviewImage(),
                  ],
                ),
        ],
      ),
    );
  }

  Widget _buildOverviewText() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          '互联网营销服务概述',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Text(
          '在数字化时代，互联网营销已成为企业获取客户、提升品牌影响力的核心手段。我们的互联网营销服务团队由资深数字营销专家组成，拥有丰富的行业经验和成功案例。我们采用数据驱动的营销策略，结合最新的数字营销技术，为客户提供全方位的互联网营销解决方案。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Text(
          '通过精准的目标受众定位和效果评估，我们确保每一分营销投入都能获得最大回报。无论是初创企业还是成熟品牌，我们都能提供量身定制的营销方案，帮助客户在激烈的市场竞争中脱颖而出。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
      ],
    );
  }

  Widget _buildOverviewImage() {
    return Container(
      width: 500,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: const Center(
        child: Text(
          '互联网营销',
          style: TextStyle(
            color: Colors.grey,
            fontSize: 18,
          ),
        ),
      ),
    );
  }

  Widget _buildServicesSection() {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('我们的服务内容'),
          const SizedBox(height: 10),
          const Text(
            '我们提供全方位的数字营销服务，覆盖从策略规划到执行落地的全流程',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          _buildServicesGrid(),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 15),
        Container(
          width: double.infinity,
          height: 2,
          color: const Color(0xFFF0F0F0),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Container(
              width: 80,
              height: 2,
              color: const Color(0xFF207CCA),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildServicesGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width < 768 ? 1 : 3,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 350 / 370,
      children: [
        _buildServiceCard('🔍', '搜索引擎优化(SEO)',
            '通过关键词研究、内容优化、技术优化等手段，提升网站在搜索引擎中的自然排名，获取精准流量。'),
        _buildServiceCard(
            '💰', '搜索引擎营销(SEM)', '通过竞价广告投放，快速获取精准流量，实现品牌曝光和销售转化。'),
        _buildServiceCard('📱', '社交媒体营销', '在微信、微博、抖音等社交平台开展营销活动，提升品牌互动和用户粘性。'),
        _buildServiceCard('✍️', '内容营销', '通过高质量内容创作和分发，建立品牌权威，吸引并转化目标客户。'),
        _buildServiceCard('✉️', '电子邮件营销', '通过精准的邮件推送，维护客户关系，促进复购和交叉销售。'),
        _buildServiceCard('📊', '数据分析与优化', '基于数据分析，持续优化营销策略，提升营销ROI。'),
      ],
    );
  }

  Widget _buildServiceCard(String icon, String title, String description) {
    return Container(
      padding: const EdgeInsets.all(30),
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: const Color(0xFFE0E9FF)),
        boxShadow: [
          BoxShadow(
            color: Colors.transparent,
            blurRadius: 10,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            icon,
            style: const TextStyle(fontSize: 48, color: Color(0xFF207CCA)),
          ),
          const SizedBox(height: 20),
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 15),
          Text(
            description,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 15,
              height: 1.7,
            ),
          ),
          const SizedBox(height: 20),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
            decoration: BoxDecoration(
              color: const Color(0xFF1E5799),
              borderRadius: BorderRadius.circular(4),
            ),
            child: const Text(
              '了解详情',
              style: TextStyle(
                color: Colors.white,
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildProcessSection() {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('我们的服务流程'),
          const SizedBox(height: 10),
          const Text(
            '科学严谨的服务流程，确保营销效果最大化',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 40),
          _buildProcessSteps(),
        ],
      ),
    );
  }

  Widget _buildProcessSteps() {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 768) {
          return Column(
            children: [
              _buildMobileProcessStep(1, '需求分析', '深入了解企业目标和市场需求'),
              _buildMobileProcessStep(2, '策略制定', '定制专属数字营销策略方案'),
              _buildMobileProcessStep(3, '执行落地', '专业团队执行营销活动'),
              _buildMobileProcessStep(4, '效果监测', '实时跟踪营销数据表现'),
              _buildMobileProcessStep(5, '优化迭代', '持续优化提升营销效果'),
            ],
          );
        } else {
          return Stack(
            children: [
              Positioned(
                top: 30,
                left: 0,
                right: 0,
                height: 3,
                child: Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Color(0xFF207CCA), Color(0xFF1E5799)],
                    ),
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _buildProcessStep(1, '需求分析', '深入了解企业目标和市场需求'),
                  _buildProcessStep(2, '策略制定', '定制专属数字营销策略方案'),
                  _buildProcessStep(3, '执行落地', '专业团队执行营销活动'),
                  _buildProcessStep(4, '效果监测', '实时跟踪营销数据表现'),
                  _buildProcessStep(5, '优化迭代', '持续优化提升营销效果'),
                ],
              ),
            ],
          );
        }
      },
    );
  }

  Widget _buildProcessStep(int number, String title, String description) {
    return Container(
      width: 150,
      child: Column(
        children: [
          Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              color: const Color(0xFF207CCA),
              borderRadius: BorderRadius.circular(30),
              boxShadow: [
                BoxShadow(
                  color: const Color(0xFF1E5799).withOpacity(0.3),
                  blurRadius: 5,
                  offset: const Offset(0, 5),
                ),
              ],
            ),
            child: Center(
              child: Text(
                number.toString(),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
          const SizedBox(height: 15),
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 10),
          Text(
            description,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildMobileProcessStep(int number, String title, String description) {
    return Container(
      margin: EdgeInsets.only(bottom: 30),
      child: Row(
        children: [
          Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              color: const Color(0xFF207CCA),
              borderRadius: BorderRadius.circular(30),
              boxShadow: [
                BoxShadow(
                  color: const Color(0xFF1E5799).withOpacity(0.3),
                  blurRadius: 5,
                  offset: const Offset(0, 5),
                ),
              ],
            ),
            child: Center(
              child: Text(
                number.toString(),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
          const SizedBox(width: 20),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    color: Color(0xFF1E5799),
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 10),
                Text(
                  description,
                  style: const TextStyle(
                    color: Color(0xFF666666),
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStatsSection() {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.symmetric(vertical: 60, horizontal: 40),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          const Text(
            '我们的营销成果',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 40),
          GridView.count(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount:
                MediaQuery.of(Get.context!).size.width < 768 ? 2 : 4,
            crossAxisSpacing: 30,
            mainAxisSpacing: 30,
            children: [
              _buildStatItem('200+', '服务客户'),
              _buildStatItem('300%', '平均流量增长'),
              _buildStatItem('5X', '平均ROI提升'),
              _buildStatItem('98%', '客户满意度'),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildStatItem(String number, String label) {
    return Column(
      children: [
        Text(
          number,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 42,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 10),
        Text(
          label,
          style: const TextStyle(
            color: Colors.white70,
            fontSize: 16,
          ),
        ),
      ],
    );
  }

  Widget _buildCasesSection() {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('成功案例'),
          const SizedBox(height: 10),
          const Text(
            '我们已为众多企业提供了优质的数字营销服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          _buildCasesGrid(),
        ],
      ),
    );
  }

  Widget _buildCasesGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width < 768 ? 1 : 3,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 300 / 350,
      children: [
        _buildCaseCard(
            '电商案例', '某电商平台SEO优化', '通过全面的SEO优化策略，帮助客户实现自然搜索流量增长350%，转化率提升200%。'),
        _buildCaseCard(
            '教育案例', '教育机构社交媒体营销', '通过精准的社交媒体营销策略，帮助客户粉丝增长500%，课程咨询量提升300%。'),
        _buildCaseCard(
            '金融案例', '金融企业SEM投放优化', '通过精细化SEM投放策略，帮助客户降低获客成本40%，ROI提升5倍。'),
      ],
    );
  }

  Widget _buildCaseCard(String imageText, String title, String description) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 200,
            color: Colors.grey[200],
            child: Center(
              child: Text(
                imageText,
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 18,
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    color: Color(0xFF1E5799),
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 10),
                Text(
                  description,
                  style: const TextStyle(
                    color: Color(0xFF666666),
                    fontSize: 14,
                  ),
                ),
                const SizedBox(height: 15),
                const Text(
                  '查看详情 →',
                  style: TextStyle(
                    color: Color(0xFF207CCA),
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFooter() {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: const Color(0xFF1A1A2E),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            // flexWrap: Wrap,
            children: [
              _buildFooterLink('关于我们'),
              _buildFooterLink('服务条款'),
              _buildFooterLink('隐私政策'),
              _buildFooterLink('帮助中心'),
              _buildFooterLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2025 创新服务平台 版权所有',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：marketing@innovationservice.com',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildFooterLink(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Text(
        text,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }
}
